import React from 'react'
import FindMusic from '@/views/lists/FindMusic/FindMusic'
import './Lists.scss'
import MyMusic from '@/views/lists/MyMusic/MyMusic'
import CreateMusic from '@/views/lists/CreateMusic/CreateMusic'
import CollectMusic from '@/views/lists/CollectMusic/CollectMusic'

interface ListsProps{
    className:string
}

const Lists = ({className}:ListsProps) =>{
    console.log('列表渲染')

    return(
        <div id="lists-contaniner">
            <div className={`${className} lists-contaniner`}>
                <div className='lists-contaniner2'>
                    <FindMusic></FindMusic>
                </div>
                <div className='lists-contaniner2'>
                    <h5>我的音乐</h5>
                    <MyMusic></MyMusic>
                </div>
                <div className='lists-contaniner2'>
                    <h5>创建的歌单</h5>
                    <CreateMusic></CreateMusic>
                </div>
                <div className='lists-contaniner2'>
                    <h5>收藏的歌单</h5>
                    <CollectMusic></CollectMusic>
                </div>
            </div>
        </div>
       
    )
}

export default React.memo(Lists)